<template>
    <div>
        <input
            type="file"
            accept="video/*"
            id="videoInput"
            @change="handleFileChange"
        />
        <div class="video">
            <video
                id="myVideo"
                src="/public/二黄.mp4"
                style="width: 400px; height: 400px"
                autoplay
            ></video>
            <div class="stop" id="stop">点击</div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import { UploadFilled } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { uploadPosterApi } from "@/api/uploadApi";

const file = ref();
const fileSize = ref();

const handleFileChange = (event: Event) => {
    const fileReader = new FileReader();
    file.value = (event.target as HTMLInputElement).files![0];
    // 文件类型不符合就返回
    if (file.value.type !== "video/mp4") return false;
    // 得到文件扩展名
    let ext = file.value.name.split(".").pop();
    // 得到文件大小
    fileSize.value = file.value.size;
    // 文件按照指定的切片数量来进行上传
    let partFileNum = 10;
    // 计算得到当前上传文件它每个切片最大的大小数
    let partSize = fileSize.value / partFileNum;

    // 得到每块文件的数
    let chunkFiles = [];
    for (let i = 0; i < partFileNum; i++) {
        let start = i * partSize;
        let end = start + partSize;
        chunkFiles.push(file.value.slice(start, end));
    }
    // 得到请求的方法集合
    let requestList: Array<() => void> = [];
    chunkFiles.forEach((file, index) => {
        const fn = () => {
            let formData = new FormData();
            formData.append("file", file);
            formData.append("name", file.name + "_" + index + "." + ext);
            return uploadPosterApi(formData);
        };
        requestList.push(fn);
    });

    // 分片上传完成时执行此方法合并分片
    const complete = async () => {
        const delay = (ms = 3000) =>
            new Promise((resolve) => {
                setTimeout(resolve, ms);
            });
    };

    // 分片上传方法
    let requestIndex = 0;
    const next = async () => {
        if (requestIndex >= requestList.length) {
            complete();
            return;
        }
        const fn = requestList[requestIndex++];
        if (typeof fn == "function") {
            await fn();
            next();
        }
    };
    next();
    //   // 如果返回为false,则阻止el-upload组件自动上传处理
    //   return false
};
//
onMounted(() => {
    const video = document.getElementById("myVideo") as HTMLVideoElement;
    const span = document.getElementById("stop");
    let bool = false;
    let time = [];
    let elapsedTime = 0;
    let PV = 0;
    let num = 0;
    let videoDuration = video.duration;
    span?.addEventListener("click", function () {
        if (video.paused) {
            video.play();
            bool = true;
        } else {
            video.pause();
            bool = false;
        }
    });
    video.addEventListener("loadedmetadata", function () {
        setInterval(() => {
            elapsedTime += 1;
            if (elapsedTime >= 3 && !video.paused && bool) {
                PV++;
                // console.log(PV)
                elapsedTime = 0;
            }
        }, 1000);
    });
    window.addEventListener("load", function (e) {
        let videoPosition = localStorage.getItem("videoPosition");
        if (videoPosition) {
            video.currentTime = +videoPosition;
        }
    });
    video.addEventListener("timeupdate", function () {
        // num++
        // if(num==5){
        localStorage.setItem("videoPosition", video.currentTime + "");
        //     num=0
        // }
    });
});
</script>

<style scoped>
.upload {
    width: 600px;
    margin: 0 auto;
}
</style>
